<template>
  <div id="app" class="layui-layout layui-layout-admin">
    <div class="layui-header header header-demo">
      <div class="layui-logo" style="color: #eee;font-size: 20px">{{uinfo.oemLogoTxt}}</div>
      <!-- 头部区域（可配合layui已有的水平导航） -->
      <ul class="layui-nav layui-layout-left">
        <!--<li class="layui-nav-item"><a href="">控制台</a></li>-->
        <!--<li class="layui-nav-item"><a href="">商品管理</a></li>-->
        <!--<li class="layui-nav-item"><a href="">用户</a></li>-->
        <!--<li class="layui-nav-item">-->
        <!--<a href="javascript:;">其它系统</a>-->
        <!--<dl class="layui-nav-child">-->
        <!--<dd><a href="">邮件管理</a></dd>-->
        <!--<dd><a href="">消息管理</a></dd>-->
        <!--<dd><a href="">授权管理</a></dd>-->
        <!--</dl>-->
        <!--</li>-->
      </ul>
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item">
          <a href="javascript:;">
            <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
            {{uinfo.userName}}
          </a>
          <!--<dl class="layui-nav-child">-->
          <!--<dd><a href="">基本资料</a></dd>-->
          <!--<dd><a href="">安全设置</a></dd>-->
          <!--</dl>-->
        </li>
        <li class="layui-nav-item"><a href="javascript:void(0)" @click="logout()">退了</a></li>
      </ul>
    </div>

    <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <el-menu
          default-active="1"
          class="el-menu-vertical"
          @select="select"
          background-color="#393D49"
          text-color="#fff"
          :unique-opened="true"
          active-text-color="#ffd04b">
          <el-menu-item  index="/admin">
            <i class="el-icon-location-outline"></i>
            <span>首页</span>
          </el-menu-item>
          <template v-for="m in menu">
            <el-submenu v-if="m.children.length>0" :index="m.title+'submenu_'">
              <template slot="title">
                <i class="el-icon-caret-right"></i>
                <span>{{m.title}}</span>
              </template>
              <el-menu-item v-for="c in m.children" :key="c.title" :index="c.href"> - {{c.title}}</el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="m.href">
              <i class="el-icon-menu"></i>
              <span slot="title">{{m.title}}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
    </div>
    <div class="layui-body">
      <el-tabs
        v-model="activeIndex"
        type="card"
        closable
        @tab-click="tabClick"
        v-if="options.length"
        @tab-remove="tabRemove">
        <el-tab-pane
          :key="item.name"
          v-for="(item, index) in options"
          :label="item.title"
          :name="item.route">
        </el-tab-pane>
      </el-tabs>
      <div>
            <router-view/>
      </div>
    </div>
    <div class="layui-footer">
      <!-- 底部固定区域 -->
      © cailifu.com - 杭州财立付科技有限公司
    </div>
    <div class="site-tree-mobile layui-hide" @click="showmenu()">
      <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade" @click="unshowmenu()"></div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  import {session,ajax,logout} from "../../data/service";

  Vue.use(ElementUI);

  import * as config from '../../config/const';


  export default {
    data(){
      return {
        menu:[],
        uinfo:{},
        tab_selected:'首页',
        wailian:1
      }
    },
    mixins:[session,ajax],
    created(){
      this.getLoginUser().then((res) => {
        this.uinfo=res;
        this.menu=this.uinfo.menus;
      });
      this.tab_selected=this.$route.name;
      if (this.$store.state.options.length===0) {
        if (this.$route.path !== '/admin') {//首页
          this.$store.commit('add_tabs', {route: '/admin', name: 'home',title:'首页'});
          this.$store.commit('set_active_index', '/' + this.$route.path.split('/')[1]);
        }
        if(this.$route.path.indexOf('/frame/') === 0){
          this.$store.commit('add_tabs', {route: this.$route.path, name: this.$route.name+this.wailian,title:this.$route.meta.title+this.wailian});
          this.$store.commit('set_active_index',this.$route.path);
          this.wailian++;
        }else{
          this.$store.commit('add_tabs', {route: '/' + this.$route.path.split('/')[1], name: this.$route.name,title:this.$route.meta.title});
          this.$store.commit('set_active_index', '/' + this.$route.path.split('/')[1]);
        }

      }
    },
    computed: {
      options(){
        return this.$store.state.options;
      },
      activeIndex: {
        get () {
          return this.$store.state.activeIndex;
        },
        set (val) {
          this.$store.commit('set_active_index', val);
        }
      }
    },
    methods:{
      select(index){
        if (this.$route.path.endsWith(index.substring(1))) {
          if(index.indexOf(".htm")>0||index.indexOf('.com')>0&&index.indexOf('http')==0){
            this.$router.go({name:'iframe',params:{backurl:decodeURIComponent(index)}});
          }else if(index=="index"){
            this.$router.go({name:index,force:true});
          }else{
            this.$router.go({path:index,force:true});
          }
        } else if(index.indexOf(".htm")>0||index.indexOf('.com')>0&&index.indexOf('http')==0){
          this.$router.push({name:'iframe',params:{backurl:decodeURIComponent(index)}});
        }else if(index=="index"){
          this.$router.push({name:index});
        }else{
          this.$router.push(index);
        }
        document.getElementsByTagName('body')[0].classList.remove("site-mobile");
      },
      showmenu(){
        document.getElementsByTagName('body')[0].classList.add("site-mobile");
      },
      unshowmenu(){
        document.getElementsByTagName('body')[0].classList.remove("site-mobile");
      },
      // tab切换时，动态的切换路由
      tabClick (tab) {
        let path = this.activeIndex;
        // 用户详情页的时候，对应了二级路由，需要拼接添加第二级路由
        if (this.activeIndex === '/userInfo') {
          path = this.activeIndex + '/' + this.$store.state.userInfo.name;
        }
        this.$router.push({path: path});
      },
      tabRemove (targetName) {
        // 首页不可删除
        if(targetName == '/admin') {
          return;
        }
        this.$store.commit('delete_tabs', targetName);
        if (this.activeIndex === targetName) {
          // 设置当前激活的路由
          if (this.options && this.options.length >= 1) {
            this.$store.commit('set_active_index', this.options[this.options.length-1].route);
            this.$router.push({path: this.activeIndex});
          } else {
            this.$router.push({path: '/'});
          }
        }
      },
      logout(){
        this.doajax(logout,{},(resp) => {
          this.removeUser();
          for (let option of this.options ) {
            this.$store.commit('delete_tabs', option.route);
          }
          this.$router.push(config.AUTH_FILTER.admin.loginUrl);
        });
      }
    },
    watch: {
      '$route'(to) {
        let flag = false;
        for (let option of this.options ) {
          if (to.path.indexOf('/frame/') === 0) {
            if (option.route === to.path) {
              flag = true;
              this.$store.commit('set_active_index', to.path);
              break
            }
          }else {
            if (option.name === to.name) {
              flag = true;
              this.$store.commit('set_active_index', '/' + to.path.split('/')[1]);
              break
            }
          }
        }
        if (!flag) {
          if(to.path.indexOf('/frame/') === 0){
            this.$store.commit('add_tabs', {route: to.path, name: to.name+this.wailian,title:to.meta.title+this.wailian});
            this.$store.commit('set_active_index', to.path);
            this.wailian++;
          }else{
            this.$store.commit('add_tabs', {route: '/' + to.path.split('/')[1], name: to.name,title:to.meta.title});
            this.$store.commit('set_active_index', '/' + to.path.split('/')[1]);
          }
        }
      }
    }
  }
</script>
<style>
  @import "../../style/layui/css/layui.css";
  @import "../../style/layui/css/global.css";
  .el-menu-vertical{
    width: 200px
  }
</style>
